<template>
  <div class="file-drop-container">
    <h2>文件拖放演示</h2>

    <!-- 拖放目标区域 -->
    <div
      class="drop-area"
      @dragover.prevent="isDragging = true"
      @dragleave="isDragging = false"
      @drop.prevent="handleDrop"
      :class="{ active: isDragging }"
    >
      <div class="drop-content">
        <i class="fas fa-file-upload fa-3x"></i>
        <p>将文件拖放到这里</p>
        <p class="hint">支持多文件拖放</p>
      </div>
    </div>

    <!-- 显示拖放的文件信息 -->
    <div class="file-info" v-if="droppedFiles.length > 0">
      <h3>拖放的文件信息：</h3>
      <ul>
        <li v-for="(file, index) in droppedFiles" :key="index">
          <strong>文件名：</strong>{{ file.name }}<br />
          <strong>大小：</strong>{{ formatFileSize(file.size) }}<br />
          <strong>类型：</strong>{{ file.type || "未知" }}<br />
          <strong>最后修改：</strong>{{ formatDate(file.lastModified) }}
        </li>
      </ul>
    </div>

    <!-- 浏览器安全提示 -->
    <div class="browser-note">
      <p>
        <i class="fas fa-info-circle"></i>
        注意：由于浏览器安全限制，网页环境中无法获取本地文件的完整路径，只能显示文件名等基本信息。
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 状态管理
const isDragging = ref(false);
const droppedFiles = ref([]);

// 处理文件拖放
const handleDrop = (e) => {
  isDragging.value = false;
  console.log("dataTransfer", e.dataTransfer);
  // 获取拖放的文件列表
  const files = e.dataTransfer.files;
  console.log("files", files);

  if (files.length > 0) {
    // 清空之前的文件列表
    droppedFiles.value = [];

    // 将文件信息添加到数组中
    for (let i = 0; i < files.length; i++) {
      droppedFiles.value.push(files[i]);
    }
  }
};

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return "0 Bytes";
  const k = 1024;
  const sizes = ["Bytes", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

// 格式化日期
const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  return date.toLocaleString();
};
</script>

<style scoped>
.file-drop-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: "Arial", sans-serif;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 2rem;
}

.drop-area {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 3rem 1rem;
  text-align: center;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
}

.drop-area.active {
  border-color: #42b983;
  background-color: rgba(66, 185, 131, 0.1);
}

.drop-content {
  color: #666;
}

.fas {
  color: #666;
  margin-bottom: 1rem;
}

.hint {
  color: #999;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.file-info {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.file-info h3 {
  color: #444;
  margin-top: 0;
  margin-bottom: 1rem;
}

.file-info ul {
  list-style: none;
  padding: 0;
}

.file-info li {
  padding: 1rem;
  background-color: white;
  border-radius: 6px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-info strong {
  color: #333;
}

.browser-note {
  margin-top: 2rem;
  padding: 1rem;
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  border-radius: 4px;
  color: #856404;
  font-size: 0.9rem;
}

.browser-note .fas {
  margin-right: 0.5rem;
  margin-bottom: 0;
}
</style>
